{% extends "nav.html" %}
{% block little %}存储{{ data.first.san }}{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
    <div class="side-body">
    <div class="page-title">
        <span class="title">业务情况表</span>
    </div>
    <div class="row">
        <div class="col-xs-12">
            {#                    <div class="card">#}
            {#                        <div class="card-header">#}
            {#                            <div class="card-title">#}
            {#                                <div class="title">存储内业务流量排行</div>#}
            {#                            </div>#}
            {#                        </div>#}
            {#                        <div class="card-body">#}
            {#                            <table class="datatable table table-striped" cellspacing="0" width="100%">#}
            {#                                <thead>#}
            {#                                <tr>#}
            {#                                    <th >wwn</th>#}
            {#                                    <th>流量</th>#}
            {#                                </tr>#}
            {#                                </thead>#}
            {#                                <tfoot>#}
            {#                                <tr>#}
            {#                                    <th >wwn</th>#}
            {#                                    <th>流量</th>#}
            {#                                </tr>#}
            {#                                </tfoot>#}
            {#                                <tbody>#}
            {#                                {% for i in data  %}#}
            {#                                    <tr>#}
            {#                                        {% for k in i.wwn_set.all  %}#}
            {#                                            <th>{{ k.wwn }} </th>#}
            {#                                        {% endfor %}#}
            {#                                        <th>{{ i.rx | cut:'m' }}</th>#}
            {#                                    </tr>#}
            {#                                {% endfor %}#}
            {#                                </tbody>#}
            {#                            </table>#}
            {#                        </div>#}
            {#                        </div>#}
            {#                    </div>#}
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <div class="title">存储列表</div>
                    </div>
                </div>
                <div class="card-body no-padding">
                    <div role="tabpanel">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">博科光交热点排行</a></li>
                            <li role="presentation"><a href="#tab2" aria-controls="tab" role="tab" data-toggle="tab">思科光交热点排行</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="tab1">
                                <table class="datatable table table-striped" id= "datatab_server" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>光交型号</th>
                                        <th>光交ip</th>
                                        <th>wwn</th>
                                        <th>流量(m)</th>
                                        <th>服务器</th>
                                        <th>业务名称</th>
                                        <th>存储型号</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>光交型号</th>
                                        <th>光交ip</th>
                                        <th>wwn</th>
                                        <th>流量(m)</th>
                                        <th>服务器</th>
                                        <th>业务名称</th>
                                        <th>存储型号</th>
                                    </tr>
                                    </tfoot>
                                    <tbody>
                                    {% for i in data %}
                                        <tr>
                                            <td>{{ i.san__prodect }}</td>
                                            <td>{{ i.san__ip }}</td>
                                            <td>{{ i.wwn__wwn}}</td>
                                            <td>{{ i.rx |cut:'m'  }}</td>
                                            <td>{{ i.wwn__host_wwn__ip }}</td>
                                            <td>{{ i.wwn__host_wwn__app }} </td>
                                            <td>{{ i.wwn__storage_wwn__ST_prodect }}-{{ i.wwn__storage_wwn__ST_ip }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="tab2">
                                <table class="datatable table table-striped" id= "datatab_server" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>光交型号</th>
                                        <th>光交ip</th>
                                        <th>wwn</th>
                                        <th>rx流量</th>
                                        <th>tx流量</th>
                                        <th>服务器</th>
                                        <th>业务名称</th>
                                        <th>存储型号</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>光交型号</th>
                                        <th>光交ip</th>
                                        <th>wwn</th>
                                        <th>rx流量(m)</th>
                                        <th>tx流量(m)</th>
                                        <th>服务器</th>
                                        <th>业务名称</th>
                                        <th>存储型号</th>
                                    </tr>
                                    </tfoot>
                                    <tbody>
                                    {% for i in data2 %}
                                        <tr>
                                            <td>{{ i.san__prodect }}</td>
                                            <td>{{ i.san__ip }}</td>
                                            <td>{{ i.wwn__wwn}}</td>
                                            <td>{{ i.rx  }}</td>
                                            <td>{{ i.tx  }}</td>
                                            <td>{{ i.wwn__host_wwn__ip }}</td>
                                            <td>{{ i.wwn__host_wwn__app }} </td>
                                            <td>{{ i.wwn__storage_wwn__ST_prodect }}-{{ i.wwn__storage_wwn__ST_ip }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-body">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
        })
    </script>
{% endblock %}